<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6.12</title>
	<script src="js/vue.js"></script>
	<style>
		#app{
			width: 480px;
			margin: 40px auto;
		}
		h2 {
			margin: 0;
		}
		.card {
			width: 480px;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 /10%);
			border_radius: 4px;
			border: 1px solid #ebeef5;
			background-color:#fff;
			overflow: hidden;
			color: #303133;
			transition: 3s;
		}
		.card-header {
			display: flex;
			align-items: center;
			padding: 18px 20px;
			border-bottom: 1px solid #ebeef5;
			box-sizing: border-box;
		}
		.card-body {
			padding: 20px;
		}
		.card-title {
			flex: 1;
		}
		a{
			position: ralative;
			font-size: 14px;
			font-weight: 500;
			color: #409eff;
			text-decoration: none;
		}
		a:hover:after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			height: 0;
			bottom: 0;
			border-bottom: 1px solid #409eff;
		}
		.row{
			display: flex;
			font-size: 18px;
			margin-bottom: 5px;
			align-items: center;
		}
		.row-label{
			font-weight:bold;
			flex: 1.cm;
		}
	</style>
   </head>
	<body>
		<div id="app">
			<my-card>
				<template v-slot:title>
					<h2>个人信息</h2>
				</template>
				<template v-slot:btns>
					<a href="javascript:;">详情</a>
				</template>
				<template v-slot:body>
					<div class="row">
						<div class="row-label">姓名：</div>
						<div class="row-content">张三</div>
						<div class="row-label">年龄：</div>
						<div class="row-content">23</div>
					</div>
					<div class="row">
						<div class="row-label">单位：</div>
						<div class="row-content">xx科技有限公司</div>
						<div class="row-label">电话：</div>
						<div class="row-content">131xx783421</div>
					</div>
				</template>
			</my-card>
		</div>
	</body>
	<script type="text/x-template" id="my-card">
		<div class="card">
		  <div class="card-header">
			  <div class="card-title">
				  <slot name="title"></slot>
			  </div>
			  <div class="card-btns">
				  <slot name="btns"></slot>
			  </div>
		    </div>
		    <div class="card-body">
			    <slot name="body"></slot>
		    </div>
		</div>
	</script>
	<script>
	Vue.component('my-card',{
		template: '#my-card'
	})
	
	let vm = new Vue({
		el: '#app',
	})
	</script>
</html>